import React, { useEffect, useRef } from 'react';
import styles from './index.less';
import { viewUtils, buildingUtils } from '@/utils/arcgis';
import { connect } from 'dva';
import synchronizeViews from '@/components/widgets/Compareview/synchronizeViews';

window.agsGlobal2 = {};
// 2d与3d的对比分析功能
const CompareView = ({ dispatch, construction, bimmodel }) => {
  const sceneDomRef = useRef();

  const sceneViewRef = useRef(null);
  const interactMapWatcher = useRef(null);
  const interactSceneWatcher = useRef(null);
  const sceneViewEventRef = useRef(null);
  const mapViewEventRef = useRef(null);
  const timer1 = useRef(null);
  const timer2 = useRef(null);

  // 初始化操作
  useEffect(() => {
    viewUtils.isViewReady().then(() => {
      const mapview = window.agsGlobal.view;
      createView(mapview);
    });

    //创建对比用的SceneView

    async function createView(mapview) {
      const basemap = await viewUtils.createBasemap(window.basemapConfig[2]);
      const param = {
        container: sceneDomRef.current,
        basemap: basemap,
        camera: window.appcfg.jsapiConfig.initialCamera,
      };
      // 初始化场景
      sceneViewRef.current = await viewUtils.initSceneView(param);
      window.agsGlobal2.view = sceneViewRef.current;
      synchronizeViews([window.agsGlobal.view, window.agsGlobal2.view]);
    }

    return () => {
      // 组件解除挂载清除事件监听
      interactMapWatcher.current && interactMapWatcher.current.remove();
      interactSceneWatcher.current && interactSceneWatcher.current.remove();
      sceneViewEventRef.current && sceneViewEventRef.current.remove();
      mapViewEventRef.current && mapViewEventRef.current.remove();
      clearTimeout(timer1.current);
      clearTimeout(timer2.current);

      if (sceneViewRef.current) sceneViewRef.current.container = null;
    };
  }, []);

  // 根据是否启用分屏功能 添加或者清除事件监听
  useEffect(() => {
    if (!bimmodel.compareState && sceneViewEventRef.current && mapViewEventRef.current) {
      // 功能关闭接触事件监听  监听compare触发
      interactMapWatcher.current.remove();
      interactSceneWatcher.current.remove();
      sceneViewEventRef.current.remove();
      mapViewEventRef.current.remove();
      clearTimeout(timer1.current);
      clearTimeout(timer2.current);
    } else if (sceneViewRef.current) {
      const mapview = window.agsGlobal.view;
      interactMapWatcher.current && interactMapWatcher.current.remove();
      interactSceneWatcher.current && interactSceneWatcher.current.remove();
      sceneViewEventRef.current && sceneViewEventRef.current.remove();
      mapViewEventRef.current && mapViewEventRef.current.remove();
      timer1.current && clearTimeout(timer1.current);
      timer2.current && clearTimeout(timer2.current);
    }
  }, [bimmodel.compareState]);

  function backmaprender() {
    buildingUtils.refresh(window.agsGlobal2.view, '长沙涌水闸');
    buildingUtils.refresh(window.agsGlobal.view, '长沙涌水闸');
    dispatch({
      type: 'construction/setLeftlicolor',
      payload: !construction.leftlicolor,
    });
  }

  return (
    <div className={bimmodel.compareState ? styles.wrapper : styles.hide}>
      <div className={styles.centerline}></div>
      <div ref={sceneDomRef} className={styles.sceneView}>
        <div
          className={styles.backbtn}
          style={{
            display: bimmodel.compareState ? 'block' : 'none',
          }}
          onClick={backmaprender}
        >
          {' '}
          还原
        </div>
      </div>
    </div>
  );
};

export default connect(({ construction, bimmodel }) => {
  return {
    construction,
    bimmodel,
  };
})(CompareView);
